---
title: Notifications
description: Send native notifications to the user.
i18nReady: true
plugin: notification
---

import PluginLinks from '@components/PluginLinks.astro';
import Compatibility from '@components/plugins/Compatibility.astro';

import PluginPermissions from '@components/PluginPermissions.astro';
import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
import CommandTabs from '@components/CommandTabs.astro';
import Stub from '@components/Stub.astro';

<PluginLinks plugin={frontmatter.plugin} />

Send native notifications to your user using the notification plugin.

## Supported Platforms

<Compatibility plugin={frontmatter.plugin} />

## Setup

Install the notifications plugin to get started.

<Tabs>
    <TabItem label="Automatic">

        Use your project's package manager to add the dependency:

        <CommandTabs npm="npm run tauri add notification"
        yarn="yarn run tauri add notification"
        pnpm="pnpm tauri add notification"
        bun="bun tauri add notification"
        cargo="cargo tauri add notification" />

    </TabItem>
    <TabItem label="Manual">
        <Steps>

        1. Run the following command in the `src-tauri` folder to add the plugin to the project's dependencies in `Cargo.toml`:

            ```sh frame=none
            cargo add tauri-plugin-notification
            ```

        2.  Modify `lib.rs` to initialize the plugin:

            ```rust title="src-tauri/src/lib.rs" ins={4}
            #[cfg_attr(mobile, tauri::mobile_entry_point)]
            pub fn run() {
                tauri::Builder::default()
                    .plugin(tauri_plugin_notification::init())
                    .run(tauri::generate_context!())
                    .expect("error while running tauri application");
            }
            ```

        3.  If you'd like to use notifications in JavaScript then install the npm package as well:

            <CommandTabs
                npm="npm install @tauri-apps/plugin-notification"
                yarn="yarn add @tauri-apps/plugin-notification"
                pnpm="pnpm add @tauri-apps/plugin-notification"
                bun="bun add @tauri-apps/plugin-notification"
            />

        </Steps>
    </TabItem>

</Tabs>

## Usage

Here are a few examples of how to use the notification plugin:

- [Send notification to users](#send-notification)
- [Add an action to a notification](#actions)
- [Add an attachment to a notification](#attachments)
- [Send a notification in a specific channel](#channels)

{/* TODO: Link to which language to use, frontend vs. backend guide when it's made */}

The notification plugin is available in both JavaScript and Rust.

### Send Notification

{/* TODO: Demo component */}

Follow these steps to send a notification:

    <Steps>
    1. Check if permission is granted

    2. Request permission if not granted

    3. Send the notification
    </Steps>

<Tabs>
<TabItem label="JavaScript">

```javascript
import {
  isPermissionGranted,
  requestPermission,
  sendNotification,
} from '@tauri-apps/plugin-notification';
// when using `"withGlobalTauri": true`, you may use
// const { isPermissionGranted, requestPermission, sendNotification, } = window.__TAURI__.notification;

// Do you have permission to send a notification?
let permissionGranted = await isPermissionGranted();

// If not we need to request it
if (!permissionGranted) {
  const permission = await requestPermission();
  permissionGranted = permission === 'granted';
}

// Once permission has been granted we can send the notification
if (permissionGranted) {
  sendNotification({ title: 'Tauri', body: 'Tauri is awesome!' });
}
```

</TabItem>
<TabItem label="Rust">

```rust
tauri::Builder::default()
    .plugin(tauri_plugin_notification::init())
    .setup(|app| {
        use tauri_plugin_notification::NotificationExt;
        app.notification()
            .builder()
            .title("Tauri")
            .body("Tauri is awesome")
            .show()
            .unwrap();

        Ok(())
    })
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
```

</TabItem>
</Tabs>

### Actions

{/* TODO: */}

<Stub />

### Attachments

{/* TODO: */}

<Stub />

### Channels

{/* TODO: */}

<Stub />

## Security Considerations

Aside from normal sanitization procedures of user input there are currently no known security considerations.

<PluginPermissions plugin={frontmatter.plugin} />
